<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
     p.solid {border-style: solid}
</style>
</head>
<body>
<div style=";width: 250px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
font-size: 60px;
background-color: palevioletred;">

    <div id="clock"style="background-color: red; width: 250px;height: 60px"p class="solid"></p>
    --:--:--
    </div>

    <input type="number" id="input"/>
    <button onclick="timming()">开始计时</button>

</div>

<audio controls id="musicl" style="display: none">

    <source src="./sound/1111.mp3" type="audio/mpeg">
</audio>
<script>

    function kaka(){
        var date=new Date();
        var h=date.getHours();
        var m=date.getMinutes();
        var s=date.getSeconds();

        var time=h+";"+m+";"+s;
        var clock=document.getElementById("clock");
        clock.innerText=time;
    }

    kaka()

    setInterval(kaka,1000);


    function timming(){
        var input=document.getElementById("input");
        var time=input.value
        function showTimer(){
            document.getElementById("Time_show").innerText=time
            time=time-1000
        }
        setInterval(showTimer,1000);
        setTimeout(Do,time);
        function Do(){
            ds();
            alert("时间到！")
        }
    }
    function ds(){
        var audio=document.getElementById("musicl");
        audio.play()

    }



</script>




</body>
</html>